<template>
  <!-- 列表 -->

  <div class="resource-container">
    <div class="resource-aside" v-if="weeklyDateList.length">
      <CollapseSelect
        v-model="curSelected"
        v-model:collapse="curCollapse"
        disableTitleSelected
        childrenKey="weekDateList"
        :titleFormat="titleFormat"
        :childLableFormat="childLableFormat"
        :selectedFormat="selectedFormat"
        :list="weeklyDateList"
        @selected-change="handleSelectedChange"
      />
    </div>
    <div class="resource-content">
      <el-container>
        <el-header>
          <div class="resource-header">
            <el-button
              type="primary"
              plain
              @click="openForm('create')"
              v-hasPermi="['school:classes:create']"
            >
              <Icon icon="ep:plus" class="mr-5px" /> 新增
            </el-button>
            <template v-if="weekData.id">
              <el-button
                type="success"
                plain
                @click="handleExport"
                :loading="exportLoading"
                v-hasPermi="['school:classes:export']"
              >
                <Icon icon="ep:download" class="mr-5px" /> 导出
              </el-button>

              <el-button
                type="primary"
                @click="openForm('update', curSelected)"
                v-hasPermi="['school:classes:update']"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                @click="handleDelete(curSelected)"
                v-hasPermi="['school:classes:delete']"
              >
                删除
              </el-button>
            </template>
          </div>
        </el-header>
        <el-main v-loading="loading">
          <div class="file-content">
            <weeklyPlanDetail :weekData="weekData" v-if="weekData.id" />
            <ElEmpty v-else description="暂无周计划" />
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
  <!-- 表单弹窗：添加/修改 -->
  <WeeklyPlanForm ref="formRef" @success="handleSuccess" />
</template>

<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
import download from '@/utils/download'
import { WeeklyPlanApi, WeeklyPlanVO } from '@/api/school/weeklyplan'
import weeklyPlanDetail from './components/weeklyPlanDetail.vue'
import WeeklyPlanForm from './WeeklyPlanForm.vue'
import { useRoute } from 'vue-router'

/** 周计划 列表 */
defineOptions({ name: 'SchoolWeeklyPlan' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const route = useRoute() // 路由

const loading = ref(false) // 列表的加载中
const list = ref<WeeklyPlanVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  classId: route.params.classId,
  topicName: undefined,
  weekNumber: undefined,
  status: undefined,
  createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const weekData: any = ref({}) // 详情弹窗
const weeklyDateList = ref([])
const curSelected: any = ref('')
const curCollapse = ref(['0'])
const getWeeklyPlan = async (id) => {
  try {
    const data = await WeeklyPlanApi.getWeeklyPlan(id)
    weekData.value = data
    weekData.value.className = route.params.className
    const dailyList = await WeeklyPlanApi.getWeeklyPlanDailyListByPlanId(data.id)
    console.log(dailyList, '---dailyList')
    weekData.value.dailyList = dailyList
  } catch (error) {
    console.log(error)
  }
}
const getWeeklyPlanDailyListByPlanId = async (planId) => {
  loading.value = true
  try {
    const data = await WeeklyPlanApi.getWeeklyPlanDailyListByPlanId(planId)
    weekData.value = data
  } catch (error) {
    console.log(error)
  }
}
const getWeeklyDateList = async (classId, notInit?: boolean) => {
  loading.value = true
  try {
    const data = await WeeklyPlanApi.getWeeklyDateList(classId)
    weeklyDateList.value = data
    if (!notInit) curSelected.value = data[0].weekDateList[0].id
    await getWeeklyPlan(curSelected.value)
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

const titleFormat = (item) => {
  return item.weekYear + '年'
}
const childLableFormat = (item) => {
  return '第' + item.weekNumber + '周'
}
const selectedFormat = (item) => {
  return item.id || item.weekYear
}
const handleSelectedChange = (id) => {
  console.log(id, '---id')
  getWeeklyPlan(id)
}
const handleSuccess = () => {
  getWeeklyDateList(route.params.classId, curType.value === 'update')
  curType.value = ''
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  // getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const curType = ref('')
const openForm = (type: string, id?: number) => {
  curType.value = type
  formRef.value.open(type, queryParams.classId, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await WeeklyPlanApi.deleteWeeklyPlan(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    getWeeklyDateList(route.params.classId)
  } catch {}
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await WeeklyPlanApi.exportWeeklyPlan(queryParams)
    download.excel(data, '周计划.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
watch(
  () => route.params.classId,
  (val) => {
    getWeeklyDateList(val)
  },
  {
    immediate: true
  }
)
/** 初始化 **/
// onMounted(() => {
//   getList()
// })
</script>

<style lang="scss" scoped>
.resource-container {
  display: flex;
  min-height: $content-height;

  .resource-aside {
    width: 200px;
    min-height: $content-height;
    background-color: #fff;
    border-right: solid 1px var(--el-menu-border-color);
  }

  .resource-content {
    height: $content-height;
    // background-color: #fff;
    flex: 1;
  }

  .file-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    font-size: unset;
    line-height: unset;
  }

  .resource-header {
    display: flex;
    height: 48px;
    // border-bottom: 1px solid #e9e9e9;
    align-items: center;
  }

  :deep() {
    .el-container {
      height: 100%;
    }

    .el-header {
      height: auto;
      background-color: #fff;
    }

    .el-empty {
      margin: 0 auto;
    }

    .el-collapse-item__header {
      padding-left: 16px;
    }

    .el-card {
      background-color: none;
    }
  }
}
</style>
